<template>
  <div class="chat-layout">
    <!-- 左侧会话面板 -->
    <SessionPanel
        :sessions="sessions"
        :active-session-id="activeSessionId"
        @add="handleAddSession"
        @edit="handleEditSession"
        @delete="handleDeleteSession"
        @switch="handleSwitchSession"
    />

    <!-- 右侧聊天主区域 -->
    <ChatMain
        :activeSession="activeSession"
        class="chat-main"
        v-if="activeSession"
    />

    <!-- 空状态提示 -->
    <div v-else class="empty-chat">
      <el-empty description="请选择或创建会话" />
    </div>

    <!-- 新建会话对话框 -->
    <AddSessionDialog
        v-model:visible="showAddDialog"
        @confirm="handleConfirmAdd"
    />

    <!-- 编辑会话对话框 -->
    <EditSessionDialog
        v-model:visible="showEditDialog"
        :session="editingSession"
        @confirm="handleConfirmEdit"
    />
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import SessionPanel from './components/SessionPanel.vue'
import ChatMain from './components/ChatMain.vue'
import AddSessionDialog from './components/AddSessionDialog.vue'
import EditSessionDialog from './components/EditSessionDialog.vue'

// 会话数据
const sessions = reactive([
])

// 状态管理
const activeSessionId = ref(null)
const showAddDialog = ref(false)
const showEditDialog = ref(false)
const editingSession = ref(null)

// 计算当前激活会话
const activeSession = computed(() => {
  return sessions.find(s => s.id === activeSessionId.value)
})

// 处理会话切换
const handleSwitchSession = (sessionId) => {
  activeSessionId.value = sessionId
  // 清除未读数
  const session = sessions.find(s => s.id === sessionId)
  if (session) session.unread = 0
}

// 新建会话处理
const handleAddSession = () => {
  showAddDialog.value = true
}

// 确认添加会话
const handleConfirmAdd = (sessionName) => {
  const newSession = {
    id: Date.now(),
    name: sessionName,
    lastMessage: '',
    unread: 0,
    time: new Date().toLocaleTimeString(),
    avatar: 'https://example.com/default-avatar.png'
  }
  sessions.unshift(newSession)
  activeSessionId.value = newSession.id
  ElMessage.success('会话创建成功')
}

// 编辑会话处理
const handleEditSession = (sessionId) => {
  const session = sessions.find(s => s.id === sessionId)
  if (session) {
    editingSession.value = { ...session }
    showEditDialog.value = true
  }
}

// 确认编辑会话
const handleConfirmEdit = (modifiedSession) => {
  const index = sessions.findIndex(s => s.id === modifiedSession.id)
  if (index !== -1) {
    sessions.splice(index, 1, modifiedSession)
    ElMessage.success('修改已保存')
  }
}

// 删除会话处理
const handleDeleteSession = (sessionId) => {
  ElMessageBox.confirm('确定删除该会话吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = sessions.findIndex(s => s.id === sessionId)
    if (index !== -1) {
      // 处理删除激活会话的情况
      if (sessionId === activeSessionId.value) {
        activeSessionId.value = sessions.length > 1
            ? sessions[0].id
            : null
      }
      sessions.splice(index, 1)
      ElMessage.success('会话已删除')
    }
  }).catch(() => {
    // 取消删除
  })
}

</script>

<style scoped>
.chat-layout {
  display: flex;
  height: 100vh;
  background: #ffffff;
}

.chat-main {
  flex: 1;
  min-width: 0;
  border-left: 1px solid #ebeef5;
}

.empty-chat {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
}
</style>
